<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="icon" href="admin/images/logo.png" />
	<link rel="stylesheet" href="./component/pear/css/pear.css" />
	<link rel="stylesheet" href="./admin/css/other/login.css" />
	<link rel="stylesheet" href="./admin/css/variables.css" />
	<link rel="stylesheet" href="./admin/css/reset.css" />
</head>

<body>
	<div class="login-page">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg">
				<img class="login-bg-img" src="./admin/images/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 login-form">
				<form class="layui-form" lay-filter="loginForm">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="https://www.layui-vue.com/assets/logo-png-B_GrttYE.png" alt="" />
								<span>Demo Layui 1.0</span>
							</div>
							<div class="top-desc">
								前后端一体模板
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input name="username" lay-verify="required" placeholder="账户"
											class="layui-input" lay-reqtext="请输入用户名" lay-vertype="tips">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input name="password" type="password" value="" lay-verify="required"
											placeholder="密码" class="layui-input" lay-affix="eye" lay-reqtext="请输入密码"
											lay-vertype="tips">
									</div>
								</div>
								<div class="tab-log-verification">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input name="captchaCode" lay-verify="required" placeholder="验证码"
												class="layui-input" lay-reqtext="请输入验证码" lay-vertype="tips">
										</div>
									</div>
									<input name="captchaKey" hidden>
									<img id="verificationImg" alt="" class="verification-img" />
								</div>
								<div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" id="loginCheck" lay-skin="primary" title="记住我">
										</div>
									</div>
								</div>
								<div class="login-btn">
									<button class="layui-btn login"  lay-submit lay-filter="login">登录</button>
								</div>
								<div class="other-login">
									<div class="greenText">注册账号</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="./component/util/base64.js"></script>
	<script src="./component/jquery/jquery-3.7.1.min.js"></script>
	<script src="./component/layui/layui.js"></script>
	<script src="./component/pear/pear.js"></script>
	<script>
		var freshCaptcha = function(){}
		layui.use(['form', 'button', 'popup', 'request','admin'], function () {

			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
			var request = layui.request;
			var admin = layui.admin;
			
			admin.changeTheme();
			
			let loginCheck = localStorage.getItem("loginCheck")
			if (loginCheck == "true") {
				$("#loginCheck").prop("checked", true)
				var loginForm = getCookie()
				form.val("loginForm", loginForm)
			} 

			freshCaptcha();

			$("#verificationImg").click(freshCaptcha);

			form.on('submit(login)', function (data) {
				var btn = button.load({
					elem: '.login',
				})
				/// 登录
				var data = data.field;
				localStorage.setItem("loginCheck", $("#loginCheck").prop("checked"));
				if ($("#loginCheck").prop("checked")) {
					let password = Base64.encode(data.password) // base64加密
					setCookie(data.username, password, 7)
				} else {
					setCookie('', '', -1)
				}
				request.postAlert("user/login", data).then((res) => {
					sessionStorage.clear();
					sessionStorage.setItem('token',res.data.token);
					sessionStorage.setItem("userInfo", JSON.stringify(res.data));
					location.href = "./index.html"
				}).catch(() => {
					freshCaptcha();
					btn.stop();
				})

				return false;
			});

			//刷新验证码
			function freshCaptcha() {
				request.post("public/getCaptcha").then(res => {
					$("[name='captchaKey']").val(res.data.captchaKey)
					$("#verificationImg").prop("src", res.data.captchaImg)
				})
			}

			function setCookie(userId, password, days) {
				let date = new Date() // 获取时间
				date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
				// 字符串拼接cookie
				window.document.cookie =
					'userId' + '=' + userId + ';path=/;expires=' + date.toGMTString()
				window.document.cookie =
					'password' + '=' + password + ';path=/;expires=' + date.toGMTString()
			}

			// 读取cookie 将用户名和密码回显到input框中
			function getCookie() {
				var loginForm = {};
				if (document.cookie.length > 0) {
					let arr = document.cookie.split('; ') //分割成一个个独立的“key=value”的形式
					for (let i = 0; i < arr.length; i++) {
						let arr2 = arr[i].split('=') // 再次切割，arr2[0]为key值，arr2[1]为对应的value
						if (arr2[0] === 'userId') {
							loginForm.username = arr2[1]
						} else if (arr2[0] === 'password') {
							loginForm.password = Base64.decode(arr2[1]) // base64解密
						}
					}
					return loginForm;
				}
			}

		})

	</script>
</body>

</html>